<!DOCTYPE html>
<html class="x-admin-sm"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body ">
                    <table id="demo" class="layui-table" lay-filter="test">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="name" th:value='${name}'>

</body>

<script>

    layui.use('table', function(){
        var table = layui.table;
        // var name = document.getElementById('demoReload').value;
        var namejs = document.getElementById("name").value;
        // console.log("aaa");
        // console.log(namejs);
        //第一个实例
        table.render({
            elem: '#demo'
            ,id: 'testReload'
            // ,height: 512
            ,url: '/query2/'+namejs
            ,page: true
            ,cols: [
                [
                    {field: 'orderNum', title: '序号', width:80, sort: true, fixed: 'left'}
                    ,{field: 'inOutFlag', title: '输入输出标志', width:120, sort: true}
                    ,{field: 'enName', title: '英文名称', width:120}
                    ,{field: 'chName', title: '中文名称', width:120}
                    ,{field: 'isRequired', title: '是否必输', width:100}
                    ,{field: 'dataDictCode', title: '数据项编号', width:100}
                    ,{field: 'dataDictTypeDescribe', title: '格式长度', width:100}
                    ,{field: 'dataType', title: '数据类型', width:100}
                    ,{field: 'remarkDescribe', title: '说明', width:240}
                ]
            ]
            , limits: [3, 5, 10, 15, 20, 25]  //一页选择显示3,5或10条数据
            , limit: 10  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

    });
</script>

<script>
    layui.use('table',
        function() {
            var table = layui.table;
            //监听单元格编辑
            table.on('edit(test)',
                function(obj) {
                    var value = obj.value //得到修改后的值
                        ,
                        data = obj.data //得到所在行所有键值
                        ,
                        field = obj.field; //得到字段
                    layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                });

            //头工具栏事件
            table.on('toolbar(test)',
                function(obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;
                    };
                });
        });
</script>

</html>